<!-- tab组件: <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
<template>
	
	<view class="me-tabs" :class="{'tabs-fixed': fixed}" style="height: 556rpx;background-color:#6D8AF9;">
	
		<view class="tab-item" style="height: 0rpx;line-height: 0rpx;">
			<view class="mytitle" >
			</view>		
		</view>
		<view class="tab-item" style="height: 300rpx;line-height: 30rpx;margin: 0rpx 20rpx;
		background-color: #7B99FB;
		
		padding: 5px 8px;
		padding-bottom: 30rpx;
		">
		<view style="position:absolute;margin-left: 77%;">
			<view v-if="this.isupload==1">
				<image src="../../static/images/icon-stock-yiwancheng.png" class="item-ico" mode="">
				</image>
			</view>
			<view v-else>
				<image src="../../static/images/icon-stock-jinxingzhong.png" class="item-ico" mode="">
				</image>
			</view>
		</view>
			<view class="mytitle_qypd" >
				<view class="item-text" style="height: 60rpx;line-height: 60rpx;border-bottom: 0px #efefef solid;">
					<view v-if="this.mydata.DocumentStr3=='全员盘点'">
					<view class="span newqypd" style="float: left;">
						<view class="newqypdview">全员盘点</view>
					</view>
					</view>
					<view class="ispan" style="font-size:32rpx;float: left;width: 75%;text-align: left;margin-left: 2%;height: 60rpx;line-height: 60rpx;
					">
						{{this.mydata.盘点单名称}}
					</view>
				</view>
				
				<view class="item-text" style="margin-top: 15rpx;border-top: 1px #6D8AF9 solid;padding-top: 10rpx;">
					<view class="ispan">
						<view class="ispan_span">创建人</view>
						<view class="ispan_value">{{this.mydata.制定人}}</view>
					</view>
					<view class="span">
						<view class="ispan_span">应盘总数</view>
						<view class="ispan_value">{{getDetailCount()}}</view>
					</view>
				</view>
				<view class="item-text">
					<view class="ispan">
						<view class="ispan_span">开始日期</view>
						<view class="ispan_value">{{dateStartDeadlineFormat()}}</view>
					</view>
					<view class="span">
						<view class="ispan_span">结束日期</view>
						<view class="ispan_value">{{dateDeadlineFormat()}}</view>
					</view>
				</view>
				<view class="item-text">
					<view class="ispan">
						<view class="ispan_span">盘点单编码</view>
						<view class="ispan_value">{{this.mydata.Code}}</view>
					</view>
					<view class="span">
						<view class="ispan_span">管理人</view>
						<view class="ispan_value">{{this.mydata.制定人}}</view>
					</view>
				</view>
				<view class="item-text">
					<view class="ispan">
						<view class="ispan_span">任务编码</view>
						<view class="ispan_value">{{this.mydata.StockCheckTaskCode}}</view>
					</view>
					<view class="span">
						<view class="ispan_span">任务名称</view>
						<view class="ispan_value ispan_rwvalue"  style="height: 120rpx;">{{this.mydata.盘点任务}}</view>
					</view>
				</view>
				<view class="item-text" style="position: absolute;border: 0px red solid;width: 65%;">
					<view class="ispan" style="border: 0px red solid;
					margin-left: 7rpx;
					width: 100%;">
						<view class="ispan_span"style="width: 30%;">盘点位置</view>
						<view class="ispan_value ispan_wzvalue" style="width: 70%;">{{pdzcwz}}</view>
					</view>
					
				</view>
			</view>		
		</view>
		<scroll-view v-if="tabs.length" :id="viewId" :scroll-left="scrollLeft" scroll-x scroll-with-animation :scroll-animation-duration="300">
			<view class="tabs-item" :class="{'tabs-flex':!isScroll, 'tabs-scroll':isScroll}">
				<!-- tab -->
				<view class="tab-item" style="height: 100rpx;" v-for="(tab, i) in tabs" :class="{'active': value===i}" :key="i" @click="tabClick(i)">
					<view style="width:100%;float: left;">
					<view style="float: left;margin-left:45rpx ;">{{getTabName(tab)}}</view>
					<view class="Itemmore"
					style="float: left;font-size: 20rpx;padding-top:8rpx;padding-left: 8rpx;">></view>
					</view>
					<view class="tabItemCount"style="width:100%;float: left;font-size: 40rpx;">
						{{getTabCount(tab)}}
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="tab-item" style="background-color: #fff;">
			<view style="padding-top: 40rpx;height:70rpx;
			line-height: 70rpx;margin-top: -40rpx;color: #BEBEBE;
			text-align: left;">
				<view style="padding-left:5%;border-top: 1px #EFEFEF solid;">
					资产数量：{{getAllDetailCount()}}
				</view>
			</view>
		</view>
		<!--
		<view style="position:absolute;margin-left: 83%;margin-top:-60rpx;width: 120rpx;" @tap="sxchaxun()">
			<image :src="srcsys" class="item-icon-sys" style="float: left;" mode=""></image>
			<view style="float: left;font-size: 28rpx;color: #bfbfbf;">筛选</view>
		</view>
		-->

	</view>
</template>

<script>
	import {openComDB,executeSQL,dropSQL} from "@/pages/API/sqllite/sqllite.js";

	var self;
	export default {
		props:{
			tabs: { // 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
				type: Array,
				default(){
					return []
				}
			},
			nameKey: { // 取name的字段
				type: String,
				default: 'name'
			},
			nameCount: { // 取name的字段
				type: String,
				default: 'count'
			},
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			},
			fixed: Boolean, // 是否悬浮,默认false
			tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
			height: { // 高度,单位rpx
				type: Number,
				default: 82
			},
			mydata: {},
			pdzcwz:"",
			isupload:0,
		},
		components: {
			},
		data() {
			return {
				viewId: 'id_' + Math.random().toString(36).substr(2,16),
				scrollLeft: 0,
				vcount:"",
				mycount:0,
				
				srcsys: "../../static/images/icon-sxuan.png",
				inputgjz:"",
				inputzcbm:"",
				inputzcmc:"",
				inputzclb:"请选择资产类别 >",
				inputzcwz:"请选择资产位置 >",
				inputsybm:"请选择使用部门 >",
				inputsyr:"请选择使用人 >",	
				inputzclbid:"",
				inputzcwzid:"",
				inputsybmid:"",
				inputsyrid:"",	
				treelist: [],
				multiple: false,
				selectParent: true,
				flod: false,
				title:"选择资产类别",
				selectvalue:"",
				showTreeValue:false,
				ShowQueryValue:false,
				serdata:{},
			}
		},
		computed: {
			isScroll(){
				return this.tabWidth && this.tabs.length // 指定了tabWidth的宽度,则支持水平滑动
			},
			tabHeightPx(){
				return uni.upx2px(this.height)
			},
			tabHeightVal(){
				console.log(78);
				return 78+'px'
				//return this.tabHeightPx+'px'
			},
			tabWidthPx(){
				return uni.upx2px(this.tabWidth)
			},
			tabWidthVal(){
				return this.isScroll ? this.tabWidthPx+'px' : ''
			},
			lineLeft() {
				if (this.isScroll) {
					return this.tabWidthPx * this.value + this.tabWidthPx/2 + 'px' // 需转为px (用rpx的话iOS真机显示有误差)
				} else{
					return 100/this.tabs.length*(this.value + 1) - 100/(this.tabs.length*2) + '%'
				}
			},
			tabGetName(){
				var ccName=tabs[this.nameKey];
				
				return '111';
			}
		},
		watch: {
			tabs() {
				this.warpWidth = null; // 重新计算容器宽度
				this.scrollCenter(); // 水平滚动到中间
			},
			value() {
				this.scrollCenter(); // 水平滚动到中间
			}
		},
		onLoad(){
			
		},
		onShow(){
			console.log(111111111111);
		},
		methods: {
			getDetailCount(){
				return parseInt(this.mydata.未盘)+parseInt(this.mydata.正常)+parseInt(this.mydata.盘亏)+parseInt(this.mydata.异常);
			},
			getAllDetailCount(){
				return parseInt(this.mydata.未盘)+parseInt(this.mydata.正常)+parseInt(this.mydata.盘亏)+parseInt(this.mydata.异常)+parseInt(this.mydata.盘盈);
			},
			cccc(){
				if(this.showTreeValue==true){
					this.showTreeValue=false;
					this.$refs.tkitree._hide();
					return true;
				}else{
					if(this.ShowQueryValue==true){
						this.ShowQueryValue=false;
						this.$refs.popupRef.close();
						return true;
					}else{
						//this.$emit("pback");
						return false;
					}
				}	
			},
			getTabName(tab){
				
				var ccName=tab[this.nameKey];
			   return (typeof tab === "object" ? tab[this.nameKey] : tab);					
			},
			getTabCount(tab){
				var ccCount=tab[this.nameCount];
				return (typeof tab === "object" ? tab[this.nameCount] : tab);						
			},
			getNameCount(){
				const myDocumentId=uni.getStorageSync("DocumentId");
				if(this.value==0){
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].name;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
						
					}else if(this.value==1){
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].name;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
					}else {
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].name;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
						}
			},
			getCurrNameCount(){
				const myDocumentId=uni.getStorageSync("DocumentId");
				if(this.value==0){
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].c;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
						
					}else if(this.value==1){
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].name;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
					}else {
						//console.log(this.tabs[this.value]);
						var name=this.tabs[this.value].name;
						//console.log(name);
						var sname=name.substring(3,name.length-1);
						return sname;
						}
			},
			getNameCode(){
				var code=this.tabs[this.value].code;
				return code;
			},
			dateFormat(){
				var ssss=this.mydata.CreatedOnDate.substr(0,10);
			        return ssss;
			      },
			dateDeadlineFormat(){
				var ssss=this.mydata.Deadline.substr(0,10);
			        return ssss;
			      },
			dateStartDeadlineFormat(){
				var ssss=this.mydata.StartDeadline.substr(0,10);
			        return ssss;
			      },
			tabClick(i){
				if(this.value!=i){
					this.$emit("input",i);
					this.$emit("change",i);
				}
			},
			async scrollCenter(){
				if(!this.isScroll) return;
				if(!this.warpWidth){ // tabs容器的宽度
					let rect = await this.initWarpRect()
					this.warpWidth = rect ? rect.width : uni.getSystemInfoSync().windowWidth; // 某些情况下取不到宽度,暂时取屏幕宽度
				}
				let tabLeft = this.tabWidthPx * this.value + this.tabWidthPx/2; // 当前tab中心点到左边的距离
				let diff = tabLeft - this.warpWidth/2 // 如果超过tabs容器的一半,则滚动差值
				this.scrollLeft = diff;
				// #ifdef MP-TOUTIAO
				this.scrollTimer && clearTimeout(this.scrollTimer)
				this.scrollTimer = setTimeout(()=>{ // 字节跳动小程序,需延时再次设置scrollLeft,否则tab切换跨度较大时不生效
					this.scrollLeft = Math.ceil(diff)
				},400)
				// #endif
			},
			initWarpRect(){
				return new Promise(resolve=>{
					setTimeout(()=>{ // 延时确保dom已渲染, 不使用$nextclick
						let query = uni.createSelectorQuery();
						// #ifndef MP-ALIPAY
						query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
						// #endif
						query.select('#'+this.viewId).boundingClientRect(data => {
							resolve(data)
						}).exec();
					},20)
				})
			},sxchaxun(){
				this.ShowQueryValue=true;
				 this.$refs.popupRef.show();
			},
			chaxunclose(){
				this.ShowQueryValue=false;
				this.$refs.popupRef.close();
			},
			chaxunreset(){
				self=this;
				this.inputzcbm="";
				this.inputzcmc="";
				this.inputzclb="请选择资产类别";
				this.inputzcwz="请选择资产位置";
				this.inputsybm="请选择使用部门";
				this.inputsyr="请选择使用人";
				this.inputzclbid="";
				this.inputzcwzid="";
				this.inputsybmid="";
				this.inputsyrid="";
				
			},
				chaxunok(){
					self=this;
					this.ShowQueryValue=false;
					this.$refs.popupRef.close();
					
					
					self.serdata.inputzcbm=this.inputzcbm;
					self.serdata.inputzcmc=this.inputzcmc;
					self.serdata.inputzclb=this.inputzclb;
					self.serdata.inputzcwzid=this.inputzcwzid;
					self.serdata.inputsybm=this.inputsybm;
					self.serdata.inputsyr=self.inputsyr;
					
					uni.setStorage({
						key:"selectValues",
						data:self.serdata
					})
					this.$emit("pChangeType");
				}
				,focusshow(e){
					this.selectvalue=e.currentTarget.dataset.id;
					this.treelist=[];
					this.$refs.tkitree.oldtreeList="";
					this.$refs.tkitree.servalue="";
					
					if(e.currentTarget.dataset.id=="zclb"){
						this.showTree();
						this.title="请选择资产类别";
						this.loadAssetType();
					}else if(e.currentTarget.dataset.id=="zcwz"){
						this.showTree();
						this.title="请选择资产位置";
						
					}else if(e.currentTarget.dataset.id=="sybm"){
						this.showTree();
						this.title="请选择使用部门";
						this.loadDepartment();
					}else if(e.currentTarget.dataset.id=="syr"){
						console.log(this.inputsybmid);
						if(this.inputsybmid=="" || this.inputsybmid==null){
							uni.showToast({
								icon: 'none',
								title: '请选择使用部门'
							});
							return false;
						}else{
							this.showTree();
							this.title="请选择使用人";
							this.loadsybmProfile();
						}
					}
					
					
				},
				// 确定回调事件
				treeConfirm(e) {
					this.showTreeValue=false;
					if(this.selectvalue=="zclb"){
						this.inputzclb=e[0].Name;
						this.inputzclbid=e[0].Id;
					}else if(this.selectvalue=="zcwz"){
						this.inputzcwz=e[0].Name;
						this.inputzcwzid=e[0].Id;
					}else if(this.selectvalue=="sybm"){
						this.inputsybm=e[0].Name;
						this.inputsybmid=e[0].Id;
					}else if(this.selectvalue=="syr"){
						this.inputsyr=e[0].Name;
						this.inputsyrid=e[0].Id;
					}
					
				},
				// 取消回调事件
				treeCancel(e) {
					this.showTreeValue=false;
					console.log(e)
				},
				// 显示树形选择器
				showTree() {
					this.showTreeValue=true;
					this.$refs.tkitree._show();
					
				},
				loadAssetType(){
					self=this;
					
					uni.showNavigationBarLoading();
					uni.request({
						url:uni.getStorageSync("localurl")+'/Common/TreeSelector', //仅为示例，并非真实接口地址。
						data: {
							_Type: "AmsAssetTypes",
						},
						success: res2 => {
							
							if (res2.data.successed == true) {
								//console.log(res2.data.data);
								var _typelist=[];
								for(var i=0;i<res2.data.data.length;i++){
									var model=res2.data.data[i];								
									var child=[];
									var _type={};
									_type.Id=model.Id;
									_type.Name=model.Name;
									for(var j=0;j<model.children.length;j++){
										var model1=model.children[j];
										var child1=[];
										var _type1={};
										_type1.Id=model1.Id;
										_type1.Name=model1.Name;
										for(var s=0;s<model1.children.length;s++){
											var model2=model1.children[s];
											var child2=[];
											var _type2={};
											_type2.Id=model2.Id;
											_type2.Name=model2.Name;
											
											_type2.children=child2;
											child1.push(_type2);									
										}
										_type1.children=child1;
										child.push(_type1);
									}
									
									_type.children=child;
									_typelist.push(_type);
								}
								self.treelist= _typelist;
								setTimeout(function () {
								  uni.hideNavigationBarLoading();
								}, 1000);
								//this.model = res.data.model;
							}
						},
						fail: () => {
							uni.hideNavigationBarLoading();
							uni.showToast({
								icon: 'none',
								title: '网络异常,请稍后重试'
							});
						}
					});
					
				},
				loadDepartment(){
					self=this;
					uni.showNavigationBarLoading();
					uni.request({
						url:uni.getStorageSync("localurl")+'/Common/TreeSelector', //仅为示例，并非真实接口地址。
						data: {
							_Type: "AmsDepartments",
						},
						success: res2 => {
							if (res2.data.successed == true) {
								self.treelist= res2.data.data;
								//this.model = res.data.model;
								setTimeout(function () {
								  uni.hideNavigationBarLoading();
								}, 2000);
							}
						},
						fail: () => {
							uni.hideNavigationBarLoading();
							uni.showToast({
								icon: 'none',
								title: '网络异常,请稍后重试'
							});
						}
					});
				},
				loadsybmProfile(){
					self=this;
					uni.showNavigationBarLoading();
					uni.request({
						url:uni.getStorageSync("localurl")+'/Common/TreeSelector', //仅为示例，并非真实接口地址。
						data: {
							_Type: "AmsProfiles",
							DepartmentId:self.inputsybmid,
							pageSize:5000
						},
						success: res2 => {
							//console.log(res2);
							if (res2.data.successed == true) {
								var mydata = [];
								var newrows = JSON.parse(res2.data.rows);
								for (var i = 0; i < newrows.length; i++) {
									var valueRows = newrows[i].toString().split(',');
									var datarow = {};
									for (var j = 0; j < res2.data.columns.length; j++) {
										//alert(_data.columns[j].字段名)
										datarow[res2.data.columns[j].字段名] = valueRows[j];
									}
									datarow.children=[];
									datarow.anyChildChecked=null;
									datarow.checked=null;
									datarow.state=null;
									mydata.push(datarow);
									
								}
								console.log(mydata);
								
								self.treelist=mydata;
								setTimeout(function () {
								  uni.hideNavigationBarLoading();
								}, 2000);
								//this.model = res.data.model;
							}
						},
						fail: () => {
							uni.hideNavigationBarLoading();
							uni.showToast({
								icon: 'none',
								title: '网络异常,请稍后重试'
							});
						}
					});
				}
				
		},
		mounted() {
			this.scrollCenter() // 滚动到当前下标
		}
	}
</script>

<style lang="scss">
	.item-icon-sys {
		width: 40upx;
		height: 40upx;
	}
	.mytitle{
		height:60rpx;
		 line-height: 60rpx;
		 text-align: center;
		 width: 100%;
		color: #fff;
		font-size: 34rpx;
		border: 0px red solid;
		
	}
	.mytitle_qypd{
		height:60rpx;
		text-align: center;
		width: 100%;
		color: #fff;
		font-size: 34rpx;
		border: 0px red solid;

	}
	.mytitle_qypd .newqypd{
		font-size:26rpx;
		width: 20% !important;
		color:#FFFFFF;
		text-align: center;
		margin-left: 2%;
		line-height: 40rpx;
		height: 40rpx;
		float: left;
		margin-top: 5rpx;
		
	}
	.mytitle_qypd .newqypd .newqypdview{
		border-radius: 10rpx;
		width: 100%;
		float: left;background-color: #fff;color: #6D8AF9;
		line-height: 50rpx;
		height: 50rpx;
		
	}
	.me-tabs{
		position: relative;
		font-size: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		overflow-y: hidden;
		background-color: #fff;
		
		&.tabs-fixed{
			z-index: 990;
			position: fixed;
			top: var(--window-top);
			left: 0;
			width: 100%;
		}
		
		.tabs-item{
			position: relative;
			
			padding-bottom: 30rpx; // 撑开高度,再配合me-tabs的overflow-y: hidden,以达到隐藏滚动条的目的
			
			background-color: #fff;
			margin: 0 2%;
			padding-top: 20rpx;
			border-radius: 10rpx;
			height:100rpx ;
		
			.tab-item{
				position: relative;
				text-align: center;
				color: #9A9A9C;
				font-size: 25rpx;
				&.active  .tabItemCount{
					color: #6D8AF9;
				}
				&.active  .Itemmore{
					color: #6D8AF9;
				}
				.tabItemCount{
					font-size: 38rpx;
					font-weight: bold;
					color: #000000;
				}
				
			}
			
		}
		
		// 平分的方式显示item
		.tabs-flex{
			display: flex;
			.tab-item{
				flex: 1;
			}
		}
		// 居左显示item,支持水平滑动
		.tabs-scroll{
			.tab-item{
				display: inline-block;
			}
		}
		
		// 选中tab的线

	}
	
	.box{
		width: 600rpx;border-bottom: 1px #CCCCCC solid;
		height: 80rpx;
		line-height: 80rpx;
	}
	.box .popupspan{
		width: 36.5%;display: inline-block;height: 80rpx;
		line-height: 80rpx;
		padding-left: 3.5%;
		color: #5a5a5a;
	}
	.box .popupinput{
		width: 52%;text-align: right;display: inline-block;height: 80rpx;line-height: 80rpx;
		padding-right: 30rpx;
		float: right;
	}
	.box .popupinput input{	
		height: 100%;line-height: 100%;
	}
	.inputff{
			color: #BEBEBE;
			font-size:30rpx;
		}
		.box .popupinput{
			font-size:30rpx;
			}
			
			.item-text .span {
				display: inline-block;
				width: 45%;
				float: right;
				font-size: 27rpx;
			}
			
			.item-text .ispan {
				font-style: normal;
				width: 53%;
				display: inline-block;
				font-size: 27rpx;
			}
			.item-text .ispan_span {
				color: #B6CBFB;
				float: left;
				width: 42%;
				text-align:left;
				height: 40rpx;
				line-height: 40rpx;
			}
			.item-text .ispan_value {
				float: left;
				height: 40rpx;
				line-height: 40rpx;
				
			}
			.item-text .ispan_rwvalue {
				height: 65rpx;
				width: 50%;
				text-align:left;
			}
			.item-text .ispan_wzvalue {
				height: 41rpx;
				width: 50%;
				text-align: left;
				
			}
			.item-content {
				padding-left: 0;
			}
			
			.item-title .ispan {
				font-size: 27rpx;
				width: auto;
				height: auto;
			}
			
			.item-title {
				font-size: 40rpx;
				color: #454545;
				width: 100%;
				padding-left: .5rem;
			}
			
			.item-title-row {
				background-image: none;
				padding-right: 0px;
			}
			.item-ico {
				width: 120upx;
				height: 120upx;
			}
</style>
